Grundsächliches zu JavaScript

JavaScript einbinden

Beim Scriptaufruf kann ein externes JS-Programm eingebunden werden
Vorzugsweise im <head>
Beispiel (siehe SourceCode)

<script src=JS-BASIS.js>
// Einzeilen Kommentar

/*
Kommentar Bereich
*/

// Globale Variablen (der Typ wird durch die Initialisation bestimmt)
const Const1;
var Var1 = 1; // Number
let Var2 = "1"; // String
// Bis hier werden die Anweisungen bei Seitenaufruf durchlaufen.
// eine Funktion dagegen muss explizit aufgerufen werden.
function FunktionNamen(Parameter)
{
console.log("Der mitgegebene Parameter war: %s.",Parameter);
}
</script>

Später im <body> kann dann die Funktion aufgerufen werden (schaue in die Konsole F12)

<script>FunktionNamen("Die Funktion wurde automatisch aufgerufen.");</script>

Oder wie mit diesen Link der mit href=javascript:funktion() aufgerufen wird

Variablen Datentypen:

Operatoren:

Berechnen und Zuordnen Mit allen 5 Rechenoperatoren (XVar = )

Ablaufsteuerung Iterationen:

Ausgabe der Schleife for(i=0;i< a.length;i++) Alle a[i];

Ausgabe der Schleife for(i in a) Alle a[i];

Ausgabe der Schleife for(i of a) Alle a[i];

Ausgabe der Schleife while(a[++i] < 20) solange a[i] < 20;

Ausgabe der Schleife do { bis a[i] < 20;}while(a[++i] < 20);

a.ForEach();

<script>
 var a = [0,1,2,3];
 // For 
 for(i=0;i < a.length;i++) document.getElementById("ForNext").innerHTML +=  `a[${i}] = ${a[i]}<br>`;
 // For-In
 for(i in a) document.getElementById("ForIn").innerHTML +=  "a[" + i + "] = " + a[i] + "<br>"; 
 // For-Of
 for(i of a) document.getElementById("ForOf").innerHTML +=  "a[" + i + "] = " + a[i] + "<br>";  
 // while
 i=0;
 while(a[++i] < 20) document.getElementById("WhileBed").innerHTML +=  "a[" + i + "] = " + a[i] + "<br>"; 
 // Do-While
 i=0;
 do{ document.getElementById("DoWhileBed").innerHTML +=  "a[" + i + "] = " + a[i] + "<br>"; }while(a[++i] < 20);
 // ForEach
 a.forEach(fe);
 function fe(i){document.getElementById("ForEach").innerHTML +=  `a[${i}] = ${a[i]}<br>`;}
</script>

Weitere Schleifensteuerungen
break : Bricht die Schleife ab (sie wird verlassen)
continue : Überspringt die folgenden Anweisungen in der Schleife (geht an den Schleifenbeginn)

Ablaufsteuerung Entscheidungen:

if-then-(else)
if(Bedingungen)
{ Anweisungen wenn Bedingungen WAHR sind;
} else
{ Anweisungen wenn Bedingungen FASCH sind;
}
Eine Kurzfassung davon:
(Bedingungen) ? 'WAHR!' : 'FALSCH!';
Beipiel: Schreibe = (8 >= 7) ? "Acht ist grösser" : "Acht ist kleiner";

switch-case-(default)

switch (Vergleicher) {
case "0":
case "1":
case "2":
case "3":
Vergleicher ist kleiner vier;
break;
case "4":
Vergleicher ist vier;
break;
case 5:
text = Vergleicher ist grösser vier ;
break;
default:
Vergleicher liegt ausserhalb 1 - 5;
break;
}

Beispiel mit Vergleichsoperatoren (achte auf das 'true')

switch (true) {
case (Vergleicher > 8):
Vergleicher ist kleiner;
break;
case (Vergleicher = "8"):
Vergleicher ist acht;
break;
case (Vergleicher > 8):
text = Vergleicher ist grösser ;
break;
default:
Vergleicher ist keine Zahl;
break;
}

try-catch-(finally)
try { Etwas versuchen
} catch (Fehler) {
Ausführen wenn der Versuch schiefgelaufen ist
} finally {
Ob der Versuch schiefgelaufen ist oder nicht, diese Anweisungen ausführen
}

Arrays vs. Objekt Überblick:

<script>
Zahlen1 = [0, '1', 2, 3 ];       
Zahlen2 = new Array('null', 'eins', 'zwei', 'drei', 'vier');	
for(i=0;i<Zahlen1.length;i++)
{
	document.write(Zahlen1[i] + " = " + Zahlen2[i] + "<br>");
}	

// in PHP gilt das auch als Array.....
Objekt = {"null" : "00", "eins" : 11, "zwei" : 22, "drei" : 33};
  console.log(Objekt);
  Object.keys(Objekt).forEach(function(key, index) {
  document.write(`<br>key=${key}, Objekt[${key}]=${Objekt[key]}, index=${index}`);
   });
</script>

@Bearbeiten@